<template>
    <el-dialog title="供应商信息" :visible.sync="isShow" @close = "closeDialog">

<el-form :model="sForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline = "true">

<div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; padding: 0 12px;">
<span style="font-size: 16px; font-weight: bold;">供应商信息</span>
<div>
  <el-button type="primary" @click="submitForm">确定</el-button>
  <el-button @click="closeDialog">取消</el-button>
</div>
</div>

<br>
<el-form-item label="供应商名称" prop="sname">
    <el-input  v-model="sForm.sname" style="width: 205px;"></el-input>
</el-form-item>
    <el-form-item label="联系人" prop="conPerson">
<el-input  v-model="sForm.conPerson" style="width: 205px;"></el-input>
</el-form-item>
<br>
<el-form-item label="联系方式" prop="conInfo">
    <el-input v-model="sForm.conInfo"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
    <el-input v-model="sForm.address"></el-input>
</el-form-item>
<br>
<el-form-item label="产品类别" prop="ptid">
    <el-select v-model="sForm.ptid" placeholder="请先选择产品类别" clearable="true" filterable  style="width: 525px;">
        <el-option v-for="pt in ptList" :label="pt.ptName" :value="pt.ptid" :key="pt.ptid"></el-option>
    </el-select>
</el-form-item>
<br>
</el-form>
</el-dialog>
</template>

<script>
export default {
    name:'supplierInfo',
    props:{
        isShow:Boolean,
        proInfo:Object
    },
    data(){
        return{
            sForm:{
                sid:0,
                sname:'',
                conPerson:'',
                conInfo:'',
                address:'',
                ptid:0,
            },
            ptList:[],
            supList:[],
            rules:{
                sname: [
                { required: true, message: '请输入供应商名称', trigger: 'blur' }
                ],
                conPerson: [
                { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                conInfo: [
                { required: true, message: '请输入联系方式', trigger: 'blur' }
                ],
                address: [
                { required: true, message: '请输入地址', trigger: 'blur' }
                ],
                ptid: [
                { required: true, message: '请选择产品类别', trigger: 'change' }
                ],
            }
        }
    },
    methods:{
        submitForm(){
          this.$refs['ruleForm'].validate((valid) => {
            //valid代表验证结果
            if (valid) {//true代表校验通过，可以将数据提交给后台
                let url = "/addSupplier"
                if(this.sForm.sid != 0){
                    url = "/updateSup"
                }
                this.$http.post(url,this.sForm).then(res =>{
                    if(res.data === 'success'){
                        this.$emit('supSave',res.data)
                    } else{
                        this.$message.error("服务器错误")
                    }
                })
            } 
        });
        },
        closeDialog(){
            //重置数据并关闭弹框
            this.sForm = {
                sid:0,
                sname:'',
                conPerson:'',
                conInfo:'',
                address:'',
                ptid:0,
            }
            this.$emit('closeDialog')
            //重置验证信息
            this.$refs['ruleForm'].resetFields();
        },
        getProType(){
          this.$http.post("/getPt").then(res => {
          console.log(res)
        //   this.sForm.prNum = this.thePrNum
          debugger
          this.ptList = res.data
          if (this.sForm.ptid == 0) {
            this.sForm.ptid = this.ptList[0].ptid;
           }
        //    this.getSupplier()
        })
        },
        // getSupplier(){
        //     if(this.sForm.ptid == 0){
        //         this.$message.error('请先选择产品类别')
        //     }
        //   this.$http.post("/getSupplier/" + this.sForm.ptid).then(res => {
        //   console.log("供应商信息为：" + res.data)
        //   debugger
        //   this.supList = res.data
        // })
        // },
        getptid(){
            this.getSupplier()
            console.log("供应商信息：" + this.supList)
            console.log('ptid值为：' + this.sForm.ptid)
        },
        // checkPt(){
        //     if(this.sForm.ptid == 0){

        //     }
        // }
    },
    watch:{
        isShow(val){
            //val代表父组件传递的新的isShow值
            this.dialogFormVisible = val
            this.getProType()
        },
          proInfo:{
              handler(val){
                  //将父组件要修改的员工信息赋值给当前表单绑定的empForm对象
                   this.sForm = {...val}
              },
          }
    }
}
</script>

<style>

</style>